


<script setup>
import {ref, reactive} from 'vue'

// 因为 Vue 的响应式系统是通过属性访问进行追踪的，
// 因此我们必须始终保持对该响应式对象的相同引用。
// 这意味着我们不可以随意地“替换”一个响应式对象，因为这将导致对初始引用的响应性连接丢失：
let state = reactive({ count: 10 })

// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！）
state = reactive({ count: 1 })
</script>

<template>
    {{state}}
</template>